// 样式私有化处理  styled-components

// 路由接受参数
import React from "react";
import styled from "styled-components";
import {CommonListBox, titleSize, colorRed} from "./common"
// import {withRouter} from "react-router-dom";
import {useLocation, useSearchParams, useParams} from "react-router-dom";
import qs from "qs";

/* 编写组件的样式： 基于 css-in-js 思想中的 styled-components 插件 */
const MenuBox = styled.div`
  background: lightblue;
  width: 400px;

  .title {
    font-size: ${titleSize}px;
    line-height: 40px;

    &:hover {
      color: ${colorRed}
    }
  }
`

const Menu = function () {
    // 问号传参接受
    // const location = useLocation()
    // let usp1 = new URLSearchParams(location.search)
    // console.log(usp1.get("id"), usp1)
    // const [usp2] = useSearchParams()
    // console.log(usp2.get("id"))
    // 路径传参接受
    // const params = useParams()
    // console.log(params)//{id: '2', name: '333'}
    // 隐式传参接受
    const location = useLocation()
    console.log(location.state)

    return <MenuBox>
        <CommonListBox>
            <li>手机c</li>
            <li>电脑c</li>
            <li>家电c</li>
        </CommonListBox>
    </MenuBox>;
}


export default Menu;

/*
*   react-router-dom v6
*   常用的hook ：
*       + useNavigate
*       + useLocation
*       + useSearchParams
*       + useParams
* */